<template>
  <div class="branch-navigation-panel">
    <h3 class="panel-title">对话分支</h3>
    <ul class="branch-list">
      <li
        v-for="branch in branches"
        :key="branch.id"
        :class="['branch-item', { active: isActiveBranch(branch) }]"
        @click="switchBranch(branch.id)"
      >
        <span class="color-indicator" :style="{ backgroundColor: branch.color }"></span>
        <span class="branch-name">{{ branch.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BranchNavigationPanel',
  props: {
    branches: {
      type: Array,
      required: true
    },
    currentNode: {
      type: Object,
      default: null
    }
  },
  methods: {
    switchBranch(branchId) {
      this.$emit('branch-switched', branchId);
    },
    isActiveBranch(branch) {
      // 如果当前没有节点，只有初始分支是激活的
      if (!this.currentNode && branch.id === 'initial') {
        return true;
      }
      // 检查分支的当前节点ID是否就是当前节点ID
      return branch.currentNodeId && branch.currentNodeId === this.currentNode?.id;
    }
  }
};
</script>

<style scoped>
.branch-navigation-panel {
  background-color: #fafafa;
  border-right: 1px solid #dcdcdc;
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 200px;
  max-width: 250px;
}

.panel-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 15px 0;
  color: #333;
}

.branch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.branch-item {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  min-height: 35px;
  transition: background-color 0.2s;
}

.branch-item:hover {
  background-color: #f0f0f0;
}

.branch-item.active {
  background-color: #e3f2fd;
  font-weight: 500;
}

.color-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.branch-name {
  color: #333333;
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>